<template>
  <a-form>
    <a-form-item required label="设备名称:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
      <a-select v-model="formItem.equipment_id" style="width: 250px" placeholder="请选择设备">
        <a-select-option v-for="item in equipmentData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
      </a-select>
      <!-- <a-input style="width: 250px;" placeholder="请输入设备名称" /> -->
    </a-form-item>
    <a-form-item required label="车号:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
      <a-input v-model="formItem.car_num" style="width: 250px;" placeholder="请输入车号" />
    </a-form-item>
    <a-form-item required label="品名登记:" :label-col="{ md: 5,xs:24 }" :wrapper-col="{ md: 18,xs:24 }">
      <a-list itemLayout="horizontal" :split="false" :dataSource="dataLists">
        <a-list-item style="padding: 5px 0;" slot="renderItem" slot-scope="item, index">
          <a-select class="mr10" v-model="dataLists[index].goods_id" style="width: 200px" placeholder="请选择品名">
            <a-select-option v-for="item in goodsAllData" :value="item.id" :key="item.id">{{item.goods_name}}</a-select-option>
          </a-select>
          <span class="fxBox" style="width: 40px;">数量:</span>
          <a-input v-model="dataLists[index].number" style="width: 200px;" placeholder="请输入数量" />
          <a-icon class="fxBox iconStyle" style="color: #19be6b;" @click='addlist' v-if="index == 0" type="plus-circle" />
          <a-icon class="fxBox iconStyle" style="color: #ed4014;" @click="delList(index)" v-if="index > 0" type="close-circle" />
        </a-list-item>
      </a-list>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button style="width: 120px;" type="primary" @click="formBtn">登记</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
  import { mapState, mapActions } from 'vuex';
  export default {
    name: "EnteringVehicle",
    data() {
      return {
        dataLists: [{
          // goods_id: '',
          number: ''
        }],

        //提交表单
        formItem:{
          // equipment_id: '',
          car_num: '',
          item:{}
        }
      }
    },
    computed: {
      ...mapState({
        requestCode: state => state.stock.requestCode,
        equipmentData: state => state.equipment.equipmentData,// 设备名称信息
        goodsAllData: state => state.productName.goodsAllData,//品名All列表(正式)
      }),
    },
    mounted() {
      this.equipmentAll()
      this.goodsAll()//品名列表
    },
    methods: {
      ...mapActions({
        equipmentAll: 'equipment/equipmentAll', //设备名称信息
        goodsAll: 'productName/goodsAll',        //所有品名信息(正式)
        dataAdd: 'stock/dataAdd',        //添加
      }),
      // 添加
      addlist() {
        const { count, dataLists } = this
        const newData = {
          // goods_id: '',
          number: ''
        }
        this.dataLists = [...dataLists, newData]
      },
      // 删除
      delList(index) {
        const { count, dataLists } = this
        this.dataLists.splice(index, 1)
      },
      // 提交
      formBtn() {
        console.log(this.dataLists);//品名登记
        this.formItem.item = this.dataLists
        this.dataAdd(this.formItem)
        console.log(this.requestCode);
        setTimeout(()=>{
          if(this.requestCode === 0) {
            this.changeData()
          }
        },500)
      },
      //重置页面
      changeData(){
        this.dataLists = [{
          number: ''
        }],
        //提交表单
        this.formItem = {
          car_num: '',
          item:{}
        }
      },
    },
  }
</script>

<style scoped>
  .iconStyle {
    cursor: pointer;
    font-size: 24px;
    padding-left: 8px;
  }
</style>
